<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 健康状况调查</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding: 16px;
                background-color: #f9f9f9;
            }
            .form-card {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 16px;
            }
            .form-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 16px;
                display: flex;
                align-items: center;
            }
            .form-title i {
                margin-right: 8px;
                color: #ff9fb5;
            }
            .form-desc {
                font-size: 14px;
                color: #666;
                margin-bottom: 16px;
                line-height: 1.5;
            }
            .form-group {
                margin-bottom: 16px;
            }
            .form-label {
                font-size: 14px;
                font-weight: 500;
                color: #333;
                margin-bottom: 8px;
                display: block;
            }
            .input-field {
                width: 100%;
                padding: 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
                background-color: #f9f9f9;
            }
            .input-field:focus {
                border-color: #ff9fb5;
                outline: none;
            }
            .radio-group,
            .checkbox-group {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 8px;
            }
            .radio-item,
            .checkbox-item {
                display: flex;
                align-items: center;
                position: relative;
                margin-right: 8px;
                margin-bottom: 8px;
            }
            .radio-label,
            .checkbox-label {
                display: inline-flex;
                align-items: center;
                padding: 8px 12px;
                background-color: #f0f0f0;
                border-radius: 16px;
                font-size: 13px;
                color: #666;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .radio-input,
            .checkbox-input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
            }
            .radio-input:checked + .radio-label,
            .checkbox-input:checked + .checkbox-label {
                background-color: #fff0f3;
                color: #ff5c8d;
            }
            .progress-container {
                margin: 8px 0 24px;
                background-color: #f0f0f0;
                height: 8px;
                border-radius: 4px;
                overflow: hidden;
            }
            .progress-bar {
                height: 100%;
                background-color: #ff9fb5;
                width: 25%;
            }
            .progress-text {
                font-size: 13px;
                color: #999;
                text-align: right;
                margin-top: 4px;
            }
            .btn-container {
                margin-top: 24px;
                display: flex;
                justify-content: space-between;
            }
            .btn-primary {
                background-color: #ff9fb5;
                color: white;
                padding: 12px 24px;
                border-radius: 24px;
                font-size: 15px;
                font-weight: 500;
                border: none;
                flex: 1;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .btn-primary:hover {
                background-color: #ff85a5;
            }
            .btn-secondary {
                background-color: #f0f0f0;
                color: #666;
                padding: 12px 20px;
                border-radius: 24px;
                font-size: 15px;
                font-weight: 500;
                border: none;
                margin-right: 12px;
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .btn-secondary:hover {
                background-color: #e0e0e0;
            }
            .form-note {
                font-size: 12px;
                color: #999;
                margin-top: 4px;
                text-align: center;
            }
            .input-group {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .input-addon {
                background-color: #f0f0f0;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 12px;
                font-size: 14px;
                color: #666;
                min-width: 40px;
                text-align: center;
            }
            .input-with-addon {
                flex: 1;
            }
            .date-picker {
                display: flex;
                gap: 8px;
            }
            .date-part {
                flex: 1;
                position: relative;
            }
            .date-input {
                width: 100%;
                padding: 12px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
                background-color: #f9f9f9;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 12px center;
                padding-right: 32px;
            }
            .slider-container {
                padding: 0 8px;
                margin: 16px 0;
            }
            .slider {
                -webkit-appearance: none;
                width: 100%;
                height: 6px;
                border-radius: 3px;
                background: #f0f0f0;
                outline: none;
                margin: 10px 0;
            }
            .slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #ff9fb5;
                cursor: pointer;
            }
            .slider-labels {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
            }
            .slider-label {
                font-size: 12px;
                color: #999;
                position: relative;
                text-align: center;
            }
            .slider-value {
                font-size: 14px;
                font-weight: 500;
                color: #ff9fb5;
                text-align: center;
                margin-top: 12px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">健康状况调查</h1>
                </div>
                <div class="flex gap-3">
                    <i class="fas fa-question-circle"></i>
                    <i class="fas fa-ellipsis-h"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 进度提示 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-clipboard-check"></i>
                        <span>个性化健康状况调查</span>
                    </div>
                    <div class="form-desc">
                        通过了解您的健康状况，我们将为您提供更全面的健康管理和个性化建议。所有信息仅用于个性化服务，我们将严格保护您的隐私。
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar"></div>
                    </div>
                    <div class="progress-text">完成度：1/4</div>
                </div>

                <!-- 基本体质信息 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-female"></i>
                        <span>基本体质信息</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的身高</label>
                        <div class="input-group">
                            <input
                                type="number"
                                class="input-field input-with-addon"
                                placeholder="请输入"
                                value="165"
                            />
                            <div class="input-addon">cm</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的体重</label>
                        <div class="input-group">
                            <input type="number" class="input-field input-with-addon" placeholder="请输入" value="52" />
                            <div class="input-addon">kg</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的出生日期</label>
                        <div class="date-picker">
                            <div class="date-part">
                                <select class="date-input">
                                    <option>1990</option>
                                    <option>1991</option>
                                    <option>1992</option>
                                    <option selected>1993</option>
                                    <option>1994</option>
                                    <option>1995</option>
                                </select>
                            </div>
                            <div class="date-part">
                                <select class="date-input">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option selected>5</option>
                                    <option>6</option>
                                </select>
                            </div>
                            <div class="date-part">
                                <select class="date-input">
                                    <option>1</option>
                                    <option selected>15</option>
                                    <option>20</option>
                                    <option>25</option>
                                    <option>30</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您属于哪种体质类型？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="constitution1" name="constitution" class="radio-input" />
                                <label for="constitution1" class="radio-label">平和质</label>
                            </div>
                            <div class="radio-item">
                                <input
                                    type="radio"
                                    id="constitution2"
                                    name="constitution"
                                    class="radio-input"
                                    checked
                                />
                                <label for="constitution2" class="radio-label">气虚质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution3" name="constitution" class="radio-input" />
                                <label for="constitution3" class="radio-label">阳虚质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution4" name="constitution" class="radio-input" />
                                <label for="constitution4" class="radio-label">阴虚质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution5" name="constitution" class="radio-input" />
                                <label for="constitution5" class="radio-label">痰湿质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution6" name="constitution" class="radio-input" />
                                <label for="constitution6" class="radio-label">湿热质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution7" name="constitution" class="radio-input" />
                                <label for="constitution7" class="radio-label">血瘀质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution8" name="constitution" class="radio-input" />
                                <label for="constitution8" class="radio-label">气郁质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution9" name="constitution" class="radio-input" />
                                <label for="constitution9" class="radio-label">特禀质</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="constitution10" name="constitution" class="radio-input" />
                                <label for="constitution10" class="radio-label">不清楚</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的睡眠质量如何？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="sleep1" name="sleep-quality" class="radio-input" />
                                <label for="sleep1" class="radio-label">非常好</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="sleep2" name="sleep-quality" class="radio-input" checked />
                                <label for="sleep2" class="radio-label">较好</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="sleep3" name="sleep-quality" class="radio-input" />
                                <label for="sleep3" class="radio-label">一般</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="sleep4" name="sleep-quality" class="radio-input" />
                                <label for="sleep4" class="radio-label">较差</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="sleep5" name="sleep-quality" class="radio-input" />
                                <label for="sleep5" class="radio-label">很差</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的压力水平如何？</label>
                        <div class="slider-container">
                            <input type="range" min="1" max="10" value="6" class="slider" id="stress-level" />
                            <div class="slider-value">中等压力</div>
                            <div class="slider-labels">
                                <div class="slider-label">几乎无压力</div>
                                <div class="slider-label">中等压力</div>
                                <div class="slider-label">极高压力</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 生理健康状况 -->
                <div class="form-card">
                    <div class="form-title">
                        <i class="fas fa-heartbeat"></i>
                        <span>生理健康状况</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的月经初潮年龄？</label>
                        <div class="input-group">
                            <input type="number" class="input-field input-with-addon" placeholder="请输入" value="13" />
                            <div class="input-addon">岁</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的月经周期通常是多少天？</label>
                        <div class="input-group">
                            <input type="number" class="input-field input-with-addon" placeholder="请输入" value="28" />
                            <div class="input-addon">天</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的月经周期是否规律？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="cycle1" name="cycle-regular" class="radio-input" checked />
                                <label for="cycle1" class="radio-label">非常规律</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="cycle2" name="cycle-regular" class="radio-input" />
                                <label for="cycle2" class="radio-label">较规律</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="cycle3" name="cycle-regular" class="radio-input" />
                                <label for="cycle3" class="radio-label">不太规律</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" id="cycle4" name="cycle-regular" class="radio-input" />
                                <label for="cycle4" class="radio-label">非常不规律</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您的经期持续时间通常是多少天？</label>
                        <div class="input-group">
                            <input type="number" class="input-field input-with-addon" placeholder="请输入" value="5" />
                            <div class="input-addon">天</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您是否有以下月经相关症状？（可多选）</label>
                        <div class="checkbox-group">
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom1" class="checkbox-input" checked />
                                <label for="symptom1" class="checkbox-label">经痛</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom2" class="checkbox-input" />
                                <label for="symptom2" class="checkbox-label">月经量过多</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom3" class="checkbox-input" />
                                <label for="symptom3" class="checkbox-label">月经量过少</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom4" class="checkbox-input" />
                                <label for="symptom4" class="checkbox-label">经前综合症</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom5" class="checkbox-input" />
                                <label for="symptom5" class="checkbox-label">乳房胀痛</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom6" class="checkbox-input" />
                                <label for="symptom6" class="checkbox-label">情绪波动</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="symptom7" class="checkbox-input" />
                                <label for="symptom7" class="checkbox-label">无明显症状</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您是否有过妊娠经历？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="pregnancy1" name="pregnancy-history" class="radio-input" />
                                <label for="pregnancy1" class="radio-label">是</label>
                            </div>
                            <div class="radio-item">
                                <input
                                    type="radio"
                                    id="pregnancy2"
                                    name="pregnancy-history"
                                    class="radio-input"
                                    checked
                                />
                                <label for="pregnancy2" class="radio-label">否</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">您是否有过流产经历？</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" id="abortion1" name="abortion-history" class="radio-input" />
                                <label for="abortion1" class="radio-label">是</label>
                            </div>
                            <div class="radio-item">
                                <input
                                    type="radio"
                                    id="abortion2"
                                    name="abortion-history"
                                    class="radio-input"
                                    checked
                                />
                                <label for="abortion2" class="radio-label">否</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="form-card">
                    <div class="btn-container">
                        <button class="btn-secondary">保存草稿</button>
                        <button class="btn-primary">下一步</button>
                    </div>
                    <div class="form-note mt-4">您的健康信息将仅用于提供个性化服务，我们将严格保护您的隐私。</div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
